<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 300px;
        height: 300px;
        background-color: cyan;
      }
      .inner {
        width: 100px;
        height: 100px;
        background-color: yellowgreen;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="inner"></div>
    </div>
    <script>
      //事件的传播: 先捕获(从大到小触发事件 window ==>document==>html==>body==>父元素==>中间元素==>子元素)==>目标元素==>事件的冒泡(由小到大触发)

      //一.目标元素: 事件在哪里触发  那么这个元素就是目标元素
      //获取目标元素  e.target
      //如果是IE8及以下  e.srcElement

      //   var containerELe = document.querySelector(".container");
      //   containerELe.onclick = function (e) {
      //     var target = e.target || e.srcElement;
      //     console.log(target); //事件在哪个元素上触发,就是哪个元素
      //     console.log(this); //事件源
      //   };

      //二.阻止事件的传播
      //1.e.stopPropagation()  2.e.cancelBubble = true;
      var containerELe = document.querySelector(".container");
      var innerEle = document.querySelector(".inner");
      innerEle.onclick = function (e) {
        console.log("inner");
        //e.stopPropagation(); //阻止事件传播
        e.cancelBubble = true;
      };

      containerELe.onclick = function () {
        console.log("container");
      };

      //三. 有些事件是不会触发冒泡
      //onmouseenter  onmouseleave  blue  focus: 没有冒泡机制
      //onmouseover  onmouseout : 支持事件的冒泡
    </script>
  </body>
</html>
